<template>

  <header>
    <div class="profile-section">
      <van-icon name="user-o" class="profile-icon" />
      <span class="login-text">点击登录</span>
    </div>
  </header>
  <main>
    <section class="daily-checkin">
      <van-icon name="clock-o" class="checkin-icon" />
      <span class="checkin-text">每日签到</span>
      <span class="ad-free-text">连续签到免广告 ></span>
    </section>

    <section class="reading-history">
      <van-icon name="history" class="history-icon" />
      <span class="history-text">阅读历史</span>
      <!-- Add more images and text as needed -->
    </section>

    <section class="messages">
      <van-icon name="chat-o" class="message-icon" />
      <span class="message-text">我的消息 ></span>
    </section>

    <section class="youth-mode">
      <van-icon name="shield-o" class="youth-icon" />
      <span class="youth-text">青少年模式 ></span>
    </section>

    <section class="system-settings">
      <van-icon name="setting-o" class="settings-icon" />
      <span class="settings-text">系统设置 ></span>
    </section>

    <section class="feedback">
      <van-icon name="comment-o" class="feedback-icon" />
      <span class="feedback-text">意见反馈 ></span>
    </section>
  </main>




  <TabBar />

</template>


<script setup>
import TabBar from "@/components/common/TabBar.vue"
</script>


<style scoped>
header {
  background: linear-gradient(to right, #ff5722, #ff9800);
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
}

.profile-section {
  display: flex;
  align-items: center;
}

.profile-icon {
  font-size: 30px;
  /* 设置图标的大小 */
  margin-right: 10px;
  color: white;
  /* 设置图标的颜色 */
}

.login-text {
  font-size: 18px;
}

main {
  padding: 20px;
}

section {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.checkin-icon,
.history-icon,
.message-icon,
.youth-icon,
.settings-icon,
.feedback-icon {
  font-size: 30px;
  /* 调整图标的大小 */
  margin-right: 10px;
}

.checkin-text,
.history-text,
.message-text,
.youth-text,
.settings-text,
.feedback-text {
  font-size: 16px;
}

.ad-free-text {
  font-size: 14px;
  color: #666;
  margin-left: auto;
}
</style>
